<template>
  <div class="paging" ref="pagingContent" v-show="total > 10">
    <div class="paging_left">
      共为您找到
      <span>{{ total }}</span>条
    </div>
    <div class="paging_content">
      <el-pagination
        background
        :current-page="value"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total"
        :page-size="pageSize"
      ></el-pagination>
    </div>
    <div class="paging_right">
      跳转至
      <input type="number" :value="value" ref="Jump_input" @blur="Jump_event" />页
    </div>
  </div>
</template>

<script>
export default {
  name: "paging",
  data() {
    return {
      // 当前页
      value: 1
    };
  },
  props: {
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    pageNo: {
      immediate: true, //很重要！！
      handler() {
        this.value = this.pageNo;
      }
    }
  },
  methods: {
    // 当前页传给父
    CurrentValue() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      this.$emit("CurrentPage", this.value);
    },
    // 当前页改变
    handleCurrentChange(val) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      this.value = val;
      this.CurrentValue();
    },
    // 跳转到多少页
    Jump_event() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      var that = this;
      if (that.$refs.Jump_input.value == 0) {
        this.$message.error("跳转页数不允许为0");
      } else if (
        that.$refs.Jump_input.value > Math.ceil(that.total / that.pageSize)
      ) {
        this.$message.error("跳转页数超过最大页数");
        // that.$refs.Jump_input.value = 1;
      } else {
        that.value = Number(that.$refs.Jump_input.value);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.paging_left {
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);

  span {
    color: rgb(68, 162, 255);
    margin: 0px 6px;
  }
}

.paging_content {
  margin-left: 10px;
  margin-right: 18px;
  display: inline-block;
  vertical-align: top;
}

.paging_right {
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);

  input {
    width: 40px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid rgb(218, 234, 245);
    background-color: rgb(255, 255, 255);
    text-align: center;
    margin: 0px 10px;
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
}
</style>
<style>
/* element 分页*/
.paging .btn-prev,
.paging .btn-next,
.paging .number,
.paging .more {
  background-color: #fff !important;
  font-weight: normal !important;
  border: 1px solid #daeaf5 !important;
}

.paging .active {
  background-color: #fff !important;
  color: #44a2ff !important;
  border: 1px solid #44a2ff !important;
}
</style>
